<template>
  <el-card class="card-wrap" shadow="hover">
    <div @click="$emit('click', data.gasId)">
      <p class="card-title">{{ data.activeName }}</p>
      <p class="time"><span class="name-size">开始时间：</span>{{ data.startTime }}</p>
      <p class="time" v-if="data.activeType !== 5"><span class="name-size">结束时间：</span>{{ data.activeType === 6 ? data.endTime : data.invalidTime }}</p>
      <!-- 状态 -->
      <div class="g-flex-c status" :class="actived">
        <span class="point"></span>
        <span>{{ statusTextList[data.activeStatus] }}</span>
      </div>

      <!-- 分割线 -->
      <el-divider></el-divider>

      <div class="g-flex-sb num-wrap">
        <div>
          <template v-if="data.activeType === 5">
            <p class="num-size">{{  data.sendNum }}</p>
            <p class="name-size">发放人数(人)</p>
          </template>
          <template v-else-if="data.activeType === 6">
            <p class="num-size">{{ data.gasDetailNum }}</p>
            <p class="name-size">店铺访问次数(次)</p>
          </template>
          <template v-else-if="data.activeType === 7">
            <p class="num-size">{{ data.gasDetailNum }}</p>
            <p class="name-size">浏览次数</p>
          </template>
          <template v-else>
            <p class="num-size">{{  data.activeType === 4 ? data.customLocation : data.couponNum }}</p>
            <p class="name-size">{{ data.activeType === 4 ? '排位顺序' : data.activeType === 3 ? '领取数量(张)' : '发放数量(张)' }}</p>
          </template>
        </div>

        <div v-if="data.activeType !== 6">
          <template v-if="data.activeType === 5">
            <p class="num-size">{{ data.couponUsedUserNum }}</p>
            <p class="name-size">核销人数(人)</p>
          </template>
          <template v-else-if="data.activeType === 7">
            <p class="num-size">{{ Math.round(data.newUserAmount) }}</p>
            <p class="name-size">活动新客流水</p>
          </template>
          <template v-else>
            <p class="num-size">{{ data.activeType === 4 ? (data.exposureCount || 0) : data.couponUsedNum }}</p>
            <p class="name-size">{{ data.activeType === 4 ? '曝光次数' : '核销数量(张)' }}</p>
          </template>
        </div>

        <div style="min-width: 80px;">
          <p class="num-size num-red">{{ Math.round(data.totalAmount) }}</p>
          <p class="name-size">订单总流水(元)</p>
        </div>
      </div>

      <div class="g-flex-c">
        <!-- 效果分析：进行中、已结束，召唤司机、会员关怀只有效果分析 -->
        <el-button @click.stop="routeToDetail" v-if="hasEffectStatus.includes(data.activeStatus) && hasEffectType.includes(data.activeType)" type="primary" plain size="small">效果分析</el-button>
        <!-- 修改：店铺领劵、油站排序：待开始，站长喊话：待审核 -->
        <el-button @click.stop="modifyDetail" v-if="(hasUpdateType1.includes(data.activeType) && hasUpdateStatus1.includes(data.activeStatus)) || (hasUpdateType2.includes(data.activeType) && hasUpdateStatus2.includes(data.activeStatus))" class="btn-black" :class="{'btn-disabled': data.activeType === 4 && data.source === 'HELA'}" type="primary" plain size="small">修改</el-button>
        <!-- 下线：店铺领劵、油站排序、站长喊话：进行中  -->
        <el-button @click.stop="updateStatus(4)" v-if="hasAllBtnType.includes(data.activeType) && data.activeStatus === 1" class="btn-red" :class="{'btn-disabled': data.activeType === 4 && data.source === 'HELA'}" type="primary" plain size="small">下线</el-button>
        <!-- 取消：店铺领劵、油站排序、站长喊话：待开始、待审核 -->
        <el-button @click.stop="updateStatus(3)" v-if="hasAllBtnType.includes(data.activeType) && hasCancelStatus.includes(data.activeStatus)" class="btn-grey" type="primary" plain size="small">取消</el-button>
      </div>
    </div>
  </el-card>
</template>
<script>
import { updateActiveState, offline } from '@/api/marketShop'
import { offlineShouts } from '@/api/marketShop/masterShouts'

export default {
  name: 'card',
  props: {
    data: Object
  },
  inject: ['resetData', 'getListData'],
  data () {
    return {
      statusTextList: {
        1: '进行中',
        2: '已结束',
        3: '已取消',
        4: '已下线',
        5: '待开始',
        6: '待审核',
        7: '未通过'
      },
      hasEffectStatus: [1, 2, 4], // 有效果分析的状态
      hasEffectType: [1, 2, 3, 4, 5, 7],
      hasAllBtnType: [4, 6], // 有所有按钮的活动类型，如果有店铺领券则加上3
      hasUpdateType1: [4], //  有修改权限的类型
      hasUpdateStatus1: [5], // 有修改权限的状态
      hasUpdateType2: [6], //  有修改权限的类型
      hasUpdateStatus2: [6], // 有修改权限的状态
      hasCancelStatus: [5, 6] // 有取消权限的状态
    }
  },
  computed: {
    actived () {
      return {
        'status1': this.data.activeStatus === 1,
        'status2': this.data.activeStatus === 2 || this.data.activeStatus === 3 || this.data.activeStatus === 7,
        'status4': this.data.activeStatus === 4,
        'status5': this.data.activeStatus === 5,
        'status6': this.data.activeStatus === 6,
      }
    }
  },
  methods: {
    // 效果分析跳转
    routeToDetail () {
      const { id } = this.data
      switch (this.data.activeType) {
        case 1:
          this.$router.push({path: '/dataAnalyze/effectAmbient', query: { activeId: id }})
          break
        case 2:
          this.$router.push({path: '/dataAnalyze/effectGone', query: { activeId: id }})
          break
        case 3:
          this.$router.push({path: '/dataAnalyze/effectCoupon', query: { activeId: id }})
          break
        case 4:
          this.$router.push({path: '/dataAnalyze/effectSort', query: { activeId: id }})
          break
        case 5:
          this.$router.push({path: '/dataAnalyze/effectMember', query: { activeId: id }})
          break
        case 7:
          this.$router.push({path: '/dataAnalyze/effectSpecialPrice', query: { activeId: id }})
          break
      }
    },
    // 修改跳转
    modifyDetail () {
      if (this.validSource()) return
      const { id } = this.data
      switch (this.data.activeType) {
        case 3:
          this.$router.push({path: '/dataAnalyze/gasCoupon', query: { activeId: id }})
          break
        case 4:
          this.$router.push({path: '/dataAnalyze/gasSort', query: { activeId: id }})
          break
        case 6:
          this.$router.push({path: '/dataAnalyze/stationMasterShouts', query: { activeId: id }})
          break
      }
    },
    // 更新状态
    updateStatus (state) {
      if (this.validSource()) return
      this.$confirm(`确定${state === 4 ? '下线' : '取消'}吗`, '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        switch (this.data.activeType) {
          case 4:
            this.offlineOrder(state)
            break
          case 6:
            this.offlineShouts(state)
            break
          default:
            this.offlineShop(state)
        }
      }).catch(() => {
        return
      })
    },
    // 校验来源，赫拉不可操作
    validSource () {
      const { source, activeType } = this.data
      if (source === 'HELA' && activeType === 4) {
        this.$alert('当前活动为运营配置，无操作权限', '提示', {
          confirmButtonText: '确定'
        })
        return true
      }
      return false
    },
    // 下线或取消店铺领劵
    async offlineShop (state) {
      try {
        const { code, message } = await updateActiveState({ activeId: this.data.id, state })
        if (code !== 200) {
          this.$message({
            message,
            type: 'error'
          })
          return
        }
        this.$message({
          message: `${state === 4 ? '下线成功' : '取消成功'}`,
          type: 'success'
        })
        this.resetData(this.data.activeType)
        this.getListData(this.data.activeType)
      } catch (error) {
        console.log(error)
      }
    },
    // 下线或取消油站排序
    async offlineOrder (state) {
      try {
        const { code, message } = await offline({ configId: this.data.id, gasId: this.data.gasId })
        if (code !== 200) {
          this.$message({
            message,
            type: 'error'
          })
          return
        }
        this.$message({
          message: `${state === 4 ? '下线成功' : '取消成功'}`,
          type: 'success'
        })
        this.resetData(this.data.activeType)
        this.getListData(this.data.activeType)
      } catch (error) {
        console.log(error)
      }
    },
    // 下线或取消站长喊话
    async offlineShouts (state) {
      try {
        const { code, message } = await offlineShouts({ activityId: this.data.id })
        if (code !== 200) {
          this.$message({
            message,
            type: 'error'
          })
          return
        }
        this.$message({
          message: `${state === 4 ? '下线成功' : '取消成功'}`,
          type: 'success'
        })
        this.resetData(this.data.activeType)
        this.getListData(this.data.activeType)
      } catch (error) {
        console.log(error)
      }
    },
  }
}
</script>
<style lang="less" scoped>
  /deep/.el-card__body {
    padding: 20px 15px;
  }
  /deep/.el-divider--horizontal {
    margin: 16px 0 0 0;
  }
  .card-wrap {
    position: relative;
    margin-top: 10px;
    .card-title {
      width: calc(~'100% - 80px');
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      font-size: 15px;
      font-weight: 600;
      color: #333333;
      margin-top: 0;
    }
    .time {
      font-size: 12px;
      color: #666666;
    }
    .status {
      width: 60px;
      height: 28px;
      border-radius: 14px;
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 12px;
      .point {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        margin-right: 5px;
      }
    }
    .num-wrap {
      div {
        flex: 1;
        margin-right: 5px;
        text-align: center;
        &:last-child {
          margin-right: 0;
        }
        .num-size {
          font-size: 18px;
          font-weight: bold;
          color: #333333;
        }
        .num-red {
          color: #FF0000;
        }
      }
    }
    .name-size {
      font-size: 12px;
      color: #999999;
    }
    /deep/.el-button {
      width: 100px;
      height: 32px;
      color: #4765F9;
      background: #fff;
      border-radius: 4px;
      border-color:#4765F9;
      &.btn-red {
        color: #FF2929;
        border-color: #FF857D;
      }
      &.btn-black {
        color: #4765F9;
        border-color: #4765F9;
      }
      &.btn-grey {
        color: #FF2929;
        border-color: #FF2929;
      }
      &.btn-disabled {
        color: #aaaaaa;
        border-color: #ccc;
      }
    }
  }
  .status1 {
    background: #EEF3FF;
    border: 1px solid #D1DEFF;
    color: #4B7EFE;
    .point {
      background: #768DFF;
    }
  }
  .status2 {
    background: #F1F1F1;;
    border: 1px solid #EDEDED;
    color: #8D8D8D;
    .point {
      background: #A5A5A5;
    }
  }
  .status4 {
    background: #FFF2F2;
    border: 1px solid #FFE4E4;
    color: #FF6161;
    .point {
      background: #FF5A5A;
    }
  }
  .status5 {
    background: #FFF8E8;
    border: 1px solid #FFF4E0;
    color: #FF9D09;
    .point {
      background: #FFAF35;
    }
  }
  .status6 {
    background: #FFF4E0;
    border: 1px solid #FFF4E0;
    color: #FF9D09;
    .point {
      background: #FFAF35;
    }
  }
</style>